import { useEffect } from "react"

export default () => {

  useEffect(() => {
    // 1）根据容器初始化实例
    const chart = echarts.init(document.getElementById("main"));

    // 2）准备配置
    let options = {
      title: {
        text: "2023年中国汽车销售数据"
      },
      color: ["gold", 'pink', "skyblue"],
      backgroundColor: 'rgb(255,189,120)',
      toolbox: {
        show: true,/*是否显示工具栏组件*/
        itemSize: 18,/*工具栏 icon 的大小*/
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },/*数据区域缩放。目前只支持直角坐标系的缩放*/
          dataView: { readOnly: false },/*数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新*/
          magicType: { type: ['line', 'bar'] },/*动态类型切换,比如把数据转换为条形图或柱形图*/
          restore: {},/*配置项还原*/
          saveAsImage: {}/*保存为图片*/
        }
      },
      tooltip: {
        show: true
      },
      xAxis: {
        data: ['大众', '奥迪', '起亚', '福特', '菲亚特']
      },
      yAxis: {

      },
      series: [
        {
          type: "bar",
          data: [110, 330, 200, 180, 200],
          name: "2022",
          showBackground: true,
          backgroundStyle: {
            color: 'rgb(180,180,180,1)'
          }
        },
        {
          type: "bar",
          data: [170, 390, 220, 190, 270],
          name: "2023",
          showBackground: true,
          backgroundStyle: {
            color: 'rgb(180,180,180,1)'
          }
        },
        {
          type: "bar",
          data: [190, 400, 270, 200, 290],
          name: "2024",
          showBackground: true,
          backgroundStyle: {
            color: 'rgb(180,180,180,1)'
          }
        }
      ]
    }

    // 3）设置配置
    chart.setOption(options)

    // 4）实现响应式
    window.addEventListener("resize", () => chart.resize());
  }, [])

  return (
    <div>
      <div id="main" style={{ width: '100%', height: '300px' }}></div>
    </div>
  )
}
